<template>
  <div id="app">
    <div :class="{mark:showMenu}" @click="SET_SHOW_MENU"></div>
    <app-top></app-top>
    <app-left :showLeft="showMenu"></app-left>
    <router-view></router-view>

  </div>
</template>

<script>
  import appTop from '@/components/appTop'
  import appLeft from '@/components/appLeft'
  import {mapState, mapMutations} from 'vuex'
  export default {
    name: 'app',
    computed: {
      ...mapState(['showMenu'])
    },
    methods: {
      ...mapMutations(['SET_SHOW_MENU'])
    },
    components: {
      appTop,
      appLeft
    }
  }
</script>

<style>
  .mark{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.4);
    z-index: 3;
  }

</style>
